/*
 * 测肤详情展示组件
 * @Author: zfx
 * @Date: 2018-09-06 16:11:20
 */
<style lang="less" rel="stylesheet/less" type="text/less">
    .v-customer-measure-skin-detail-views {
		padding: 20px;
        overflow-y: scroll;
        &::-webkit-scrollbar {
			display: none;
        }
        /*表单信息区域*/
        .detail-info {
			position: relative;
			font-size: 15px;
            border-radius: 10px;
			box-shadow: 0 0px 15px -2px #ccc;
			overflow: hidden;
			//头部标题
			.detail-header {
				border-bottom: 1px #eee solid;
				.ivu-col-span-3,.ivu-col-span-5,.ivu-col-span-16 {
					text-align: center;
					font-size: 18px;
					color: #666666;
					padding: 20px 0;
				}
				.ivu-col-span-16 {
					padding-right: 30px;
				}
			}
			//主体内容
			.detail-main {
				position: relative;
				.ivu-col-span-5,.ivu-col-span-16 {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					height: 495px;
				}
				.ivu-col-span-16 {
					padding-right: 30px;
					.progress {
						padding-bottom: 15px;
					}
					p {
						color: #666666;
						font-size: 16px;
						line-height: 30px;
						text-align: left;
					}
					img {
						width: 100px;
						height: 100px;
						border-radius: 50%;
					}
				}
				.wax-info {
					justify-content: center;
					.img-box {
						display: flex;
						justify-content: space-evenly;
						p {
							text-align: center;
							font-size: 16px;
							color: #666;
							line-height: 30px;
						}
					}
					b {
						font-size: 18px;
						color: #333333;
						display: block;
						padding-top: 5px;
						font-weight: normal;
					}
				}
				.noData {
					text-align: center;
					img {
						width: 315px;
						height: 239px;
					}
					p {
						color: #97CAFF;
						font-size: 18pt;
					}
				}
			}
			//主体内容END
		}
		// 侧边选项卡样式
		.ivu-menu-light {
			border-bottom-left-radius: 10px;
			text-align: center;
			background: #F4F4F4;
			color: #999999;
			border: none;
		}
		.ivu-menu {
			z-index: 888;
		}
		.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
			border-right: none;
			background: #FFF;
			color: #333333;
		}
		.ivu-menu-light.ivu-menu-vertical .ivu-menu-item{
			border: none;
		}
		.ivu-menu-vertical .ivu-menu-item, .ivu-menu-vertical .ivu-menu-submenu-title {
			padding: 0;
			font-size: 16px;
			color: #999999;
		}
		.ivu-menu-item-touch {
			height: 124px;
			line-height: 124px;
		}
		.ivu-menu-item-image {
			height: 99px;
			line-height: 99px;
		}
		.ivu-menu-vertical.ivu-menu-light:after {
		background: #FFF;
		}
		//成因图标样式
		.problem {
            width: 50%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
            color: #fff;
            margin: 0 auto;
			font-size: 14px;
			letter-spacing: 2px;
            &.color-0 {
                background-color: #2198FD;
            }
            &.color-1 {
                background-color: #FEAD2F;
            }
            &.color-2 {
                background-color: #FF738D;
            }
		}
		//侧边选项卡样式END
		//loading动画调整位置
		.ivu-spin-fix{
			z-index: 889;
		}
		//loading动画调整位置END
    }

</style>
<template>
	<div
		class="v-customer-measure-skin-detail-views">
		<div>

			<div
				class="detail-info">
				<Row
					type="flex"
					align="middle"
					class="detail-header">
					<i-col span="3">{{ skinType === 'hm' ? $t('report_detail.detection_parts') : $t('report_detail.test_items') }}</i-col>
					<i-col span="5">{{ skinType === 'hm' ? $t('report_detail.cause_analysis') : $t('report_detail.existing_problem') }}</i-col>
					<i-col span="16">{{ skinType === 'hm' ? $t('report_detail.expert_proposes') : $t('report_detail.analysis_advise') }}</i-col>
				</Row>

				<Row
					type="flex"
					justify="center"
					align="middle"
					class="detail-main">

					<i-col span="3">
						<Menu
							:active-name="skinType === 'hm' ? 1 : 3"
							width="100%"
							text-align="center"
							@on-select="changeTab">
							<Menu-item
								v-for="item in skinType === 'hm' ? detectionParts : handleMenuSort()"
								:value="item.key"
								:key="item.key"
								:class="skinType === 'hm' ? 'ivu-menu-item-touch' : 'ivu-menu-item-image'"
								:name="Number(item.key)">
								{{ item.value }}
							</Menu-item>
						</Menu>
					</i-col>
					<!-- 加载 -->
					<Spin
						v-if="spinShow"
						size="large"
						fix/>
					<!-- 智能测肤 -->
					<i-col
						v-if="Object.keys(causeAnalysis).length > 0 && skinType === 'hm'"
						span="5">
						<div
							v-for="(item, key) in causeAnalysis.labels"
							:value="key"
							:key="key"
							:class="`color-${key}`"
							class="problem">{{ item || $t('common.unknown') }}</div>
					</i-col>

					<i-col
						v-if="Object.keys(causeAnalysis).length > 0 && skinType === 'hm'"
						span="16"
						class="hm-info">
						<div
							v-for="(item, index) in expert_proposes"
							:value="index"
							:key="index">
							<line-progress
								:show-name="true"
								:bg-colors="item.bgColors"
								:colors="item.colors"
								:value="Number(item.value)"
								:max-value="item.maxValue"
								:label="item.label"
								:unit-id="`hm_${item.id}`"
								:unit="item.unit"
								class="progress"/>
							<p>{{ item.content }}</p>
						</div>
					</i-col>
					<!-- 3D测肤 -->
					<i-col
						v-if="Object.keys(causeAnalysis).length > 0 && skinType === 'wax'"
						span="5">
						<div class="problem color-2">{{ causeAnalysis.levelname || $t('common.unknown') }}</div>
					</i-col>

					<i-col
						v-if="Object.keys(causeAnalysis).length > 0 && skinType === 'wax'"
						span="16"
						class="wax-info">
						<div class="img-box">
							<div>
								<img
									:src="causeAnalysis.origin_img"
									class="user-img"
									alt="">
								<p>{{ $t('report_detail.original_image') }}</p>
							</div>
							<div>
								<img
									:src="causeAnalysis.analyse_img"
									class="user-img"
									alt="">
								<p>{{ $t('report_detail.analysis_image') }}</p>
							</div>
						</div>

						<div>
							<line-progress
								:show-name="true"
								:bg-colors="wax_bgColors"
								:colors="wax_colors"
								:value="Number(causeAnalysis.value)"
								:max-value="Number(100)"
								:label="causeAnalysis.itemsname"
								:unit-id="`wat${causeAnalysis.itemsid}`"
								:unit="$t('report_detail.points')"
								class="progress"/>
							<div>
								<div>
									<b>{{ $t('report_detail.ski_analysis') }}</b>
									<p>{{ causeAnalysis.cause }}</p>
								</div>
								<div>
									<b>{{ $t('report_detail.expert_proposes') }}</b>
									<p>{{ causeAnalysis.expert }}</p>
								</div>
							</div>
						</div>

					</i-col>

					<!-- 没有测肤数据 -->
					<i-col
						v-if="Object.keys(causeAnalysis).length === 0"
						span="21"
						class="noData">
						<img :src="noData">
						<p>{{ $t('common.no_test') }}</p>
					</i-col>
				</Row>

			</div>

		</div>

	</div>
</template>

<script>
import lineProgress from 'src/views/component/progress';

export default {
	name: 'SkinTest',
	components: {
		lineProgress,
	},
	props: {
		skinType: {
			type: String,
			default() {
				return 'hm';
			},
		},
		detectionParts: {
			type: Array,
			default() {
				return [];
			},
		},
		causeAnalysis: {
			type: Object,
			default() {
				return {};
			},
		},
		spinShow: {
			type: Boolean,
			default() {
				return false;
			},
		},
	},
	data() {
		return {
			noData: require('src/assets/img/shuju_wushuju_icon.svg'),

			menu_sort: [3, 2, 1, 5, 4], // 3D测肤详情Menu正确的排序

			image_skin_menu: [], // 3D测肤侧边选项卡

			active_name: 1,

			wax_bgColors: [],

			wax_colors: [],

			expert_proposes: [ // 智能测肤
				{
					bgColors: ['rgb(33,152,253)', 'rgba(0,153,255,0.3)'],
					colors: ['rgb(33,152,253)'],
					value: Number(this.causeAnalysis.water),
					maxValue: 100,
					label: this.$t('report.water'),
					id: `water_${this.causeAnalysis.id}`,
					unit: '%',
					content: '',
				},
				{
					bgColors: ['rgb(255,173,47)', 'rgba(223,151,41,0.3)'],
					colors: ['rgb(255,173,41)'],
					value: Number(this.causeAnalysis.oil),
					maxValue: 50,
					label: this.$t('report.oil'),
					id: `oil_${this.causeAnalysis.id}`,
					unit: '%',
					content: '',
				},
				{
					bgColors: ['rgb(255,115,141)', 'rgba(223,101,123,0.3)'],
					colors: ['rgb(255,115,141)'],
					value: Number(this.causeAnalysis.flex),
					maxValue: 10,
					label: this.$t('report.elastic'),
					id: `flex_${this.causeAnalysis.id}`,
					unit: '',
					content: '',
				},
			],
		};
	},

	watch: {
		causeAnalysis() {
			this.updateDetail();
		},
	},
	created() {
		this.updateDetail();
	},
	methods: {

		/**
		 * 3D测肤时Menu重新排序
		 * @return {undefined} {description}
		 */
		handleMenuSort() {
			const array = [];
			this.menu_sort.forEach((item) => {
				array.push(this.detectionParts.filter(err => err.key === item)[0]);
			});
			return array;
		},

		/**
		 * 改变选项卡回调
		 * @param  {Number} name {选择菜单（MenuItem）的name值}
		 * @return {undefined} {description}
		 */
		changeTab(name) {
			this.$emit('index', name);
		},

		/**
		 * 切换部位更新测肤详情信息/进度条颜色
		 * @return {undefined}
		 */
		updateDetail() {
			if (Object.keys(this.causeAnalysis).length > 0 && this.skinType === 'hm') {
				this.causeAnalysis.suggests.forEach((item, index) => {
					this.expert_proposes[index].content = item.suggest;
					switch (index) {
					case 0:
						this.expert_proposes[index].value = this.causeAnalysis.water;

						break;
					case 1:
						this.expert_proposes[index].value = this.causeAnalysis.oil;

						break;
					default:
						this.expert_proposes[index].value = this.causeAnalysis.flex;
						break;
					}
				});
			} else if (Object.keys(this.causeAnalysis).length > 0 && this.skinType === 'wax') {
				if (this.causeAnalysis.value <= 50) {
					this.wax_bgColors = ['rgb(255,94,104)', 'rgba(255,223,225)'];
					this.wax_colors = ['rgb(255,94,104)'];
				} else if (this.causeAnalysis.value > 50 && this.causeAnalysis.value <= 70) {
					this.wax_bgColors = ['rgb(33,152,253)', 'rgba(222,237,255)'];
					this.wax_colors = ['rgb(33,152,253)'];
				} else if (this.causeAnalysis.value > 70 && this.causeAnalysis.value <= 100) {
					this.wax_bgColors = ['rgb(88,235,116)', 'rgba(221,251,223)'];
					this.wax_colors = ['rgb(88,235,116)'];
				}
			}
		},
	},
};
</script>
